import React, { Component } from 'react'
import { Layout, Breadcrumb, Pagination } from 'antd';
import { Button } from 'antd'
import MyNavLink from '../MyNavLink';
import '../Develop/develop.css'
import { withRouter } from 'react-router';

const { Content } = Layout;
class Develop extends Component {
    constructor(props) {
        super(props);
        this.state = {
            color: ["white", "white", "white", "white", "white", "white", "white", "white", "white", "white"],
            flag: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            numflag: 99999,
            current: 1,
            houseArray: [],
            showArray: []
        };
    }

    componentDidMount() {
        fetch('/house/visit', {
            method: 'get',
        }).then((response) => {
            return response.json()
        }).then((data) => {
            console.log( data)
            this.setState({
                houseArray: data,
                showArray: data.slice(0, 10)
            })
        })
    }

    componentWillUnmount() {
        this.setState = () => false;
    }

    onpageChange = page => {
        this.setState({
            current: page,
            showArray: this.state.houseArray.slice((page - 1) * 10, (page) * 10)
        })
        console.log("点击第" + page + "页");
        console.log("翻页后showArray如下")
        console.log(this.state.showArray)
        // fetch('http://127.0.0.1:8000/JSON-server', {
        //     method: 'post',
        //     headers: {
        //         "Content-type": "application/json"
        //     },
        //     body: page
        // }).then((response) => {
        //     return response.json()
        // }).then((data) => {
        //     console.log("点击换页收到的数据为" + data)
        //     this.setState({
        //         current: page,
        //         houseArray: data
        //     })
        // }).catch(function (error) {
        //     console.log(error)
        // })

    };

    //实现点击更换背景颜色
    ItemOnClick = (e, index) => {
        const addflag = this.state.flag.reduce((num, total) => total + num)

        if (this.state.flag[index] === 0) {
            if (addflag === 0) {

                const newcolor = this.state.color
                newcolor[index] = "#1890FF"
                const newflag = this.state.flag
                newflag[index] = 1

                this.setState({
                    color: newcolor,
                    flag: newflag,
                    numflag: index
                })
            }
            else if (addflag === 1) {

                const newcolor = ["white", "white", "white", "white", "white", "white", "white", "white", "white", "white"]
                newcolor[index] = "#23A9F2"
                const newflag = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                newflag[index] = 1

                this.setState({
                    color: newcolor,
                    flag: newflag,
                    numflag: index
                })
            }
        }
    }
    changeerror = () => {
        alert("请选择后再进行修改！")
    }


    onSubmit = (values) => {
        console.log('Success:', values);
    };

    // onFinishFailed = (errorInfo) => {
    //     console.log('Failed:', errorInfo);
    // };

    render() {


        return (
            <div className="" id="returnMyText">
                <Content style={{ padding: '0 50px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>上传发布</Breadcrumb.Item>
                        <Breadcrumb.Item>村域开发</Breadcrumb.Item>
                    </Breadcrumb>

                    <div style={{ width: "800px" }}>
                        <div className="show-container" >

                            <div className="item-container">
                                <div className="inline-container">
                                    <span className="span-title" style={{ flex: 0.75 }}>标题</span>
                                    <span className="line">|</span>
                                    <span className="span-id" style={{ flex: 0.25 }}>默认位置</span>
                                </div>
                            </div>


                            {this.state.showArray.map((item, index) => {
                                if (index < 9) {
                                    return (
                                        <div className="item-container" key={item.id} onClick={(e) => this.ItemOnClick(e, index)} style={{ backgroundColor: this.state.color[index] }}>
                                            <div className="inline-container">
                                                <span className="span-title">{item.title}</span>
                                                <span className="line">|</span>
                                                <span className="span-id">{index + 1}</span>
                                            </div>
                                        </div>
                                    )
                                }
                                else {
                                    return (
                                        <div className="item-container" key={item.id} onClick={(e) => this.ItemOnClick(e, index)} style={{ backgroundColor: this.state.color[index] }}>
                                            <div className="inline-container">
                                                <span className="span-title">{item.title}</span>
                                                <span className="line">|</span>
                                                <span className="span-id">{index + 1}</span>
                                            </div>
                                        </div>
                                    )
                                }
                            })
                            }
                        </div>

                        <div className="pagebutton-container">
                            <Pagination {...this.props}
                                current={this.state.current}
                                onChange={this.onpageChange}
                                total={Math.ceil(this.state.houseArray.length / 10) * 10}
                            />
                        </div>
                        <div className="button-container">
                            {
                                this.state.numflag === 99999 ?
                                    (<Button type="primary" onClick={this.changeerror} >修改</Button>) :
                                    (<MyNavLink to={{
                                        pathname: '/developchangeform',
                                        state: { item: this.state.houseArray[this.state.numflag] }
                                    }}>
                                        <Button type="primary" >修改</Button>
                                    </MyNavLink>)
                            }
                            <Button type="primary">删除</Button>
                            <MyNavLink to="/developform">
                                <Button type="primary">添加新项目</Button>
                            </MyNavLink>
                        </div>



                    </div>

                </Content >
            </div >
        )
    }
}
export default withRouter(Develop)